<template>
  <div>
    <!-- echart表格 -->
    <div :id="randomId" class="piecharts" :style="echartStyle"></div>
  </div>
</template>

<script>
	import echarts from 'echarts'
	import 'echarts/theme/shine.js';//图表主题
	// 引入 ECharts 主模块
////	var echarts = require('../../echarts/lib/echarts');
//	require("echarts/lib/chart/pie");
//	// 引入提示框和标题组件
//	require('echarts/lib/component/tooltip');
//	require('echarts/lib/component/title');
	
	export default {
		name:'mPiechart',
		props: {
			echartStyle: {  // 样式
				type: Object,
				default () {          
					return  {}        
				} 
			},
			// 标题文本
			titleText: {        
				type: String,
				default:   ''      
			},
			// 提示框键名
			tooltipFormatter: {        
				type: String,
				default:   ''      
			},
			// 扇形区域名称
			opinion: {        
				type: Array,
				default () {          
					return  []        
				}      
			},
			// 提示框标题
			seriesName: {        
				type: String,
				default:   ''      
			},
			// 扇形区域数据
			opinionData: {        
				type: Array,
				default () {          
					return  []        
				}      
			},
			    
		},
		data() {      
			return  {
				randomId:'mychart'+ Date.now() + Math.random()
			}    
		},
		mounted() {      
			this.$nextTick(function() {        
				this.drawPie(this.randomId)
			})
		},
		methods: { 
			// 监听扇形图点击
			eConsole(param) {         
				// 向父组件传值
				this.$emit("currentEchartData", param.name);      
			},
			// 绘制饼状图
			drawPie(id) {     
				console.log(id); 
				this.charts = echarts.init(document.getElementById(id),'shine');        
				this.charts.on("click",  this.eConsole);        
				this.charts.setOption({          
					title: {// 标题文本 
						text:  this.titleText,
						left:   'center'          
					},
					tooltip: {            
						trigger:   'item',
						formatter:   "{a} <br/> "  +  this.tooltipFormatter +  ":{c}"          
					},
					legend: {            
						bottom: 20,
						left:   'center',
						data:  this.opinion  // 扇形区域名称
					},
					series: [{              
						name: this.seriesName,
						// 提示框标题
              type:   'pie',
              radius:   '65%',
              center: ['50%',  '50%'],
              selectedMode:   'single',
              data: this.opinionData,
						  // 扇形区域数据
						 itemStyle: {                
							emphasis: {                  
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor:   'rgba(0, 0, 0, 0.5)'                
							}          
						}            
					}]        
				})    
			}  
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.piecharts{
    width: 100%;
}
</style>
